<template>
	<view>
		<view class="page">
			<comp-comm v-bind="{data:data}"></comp-comm>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="top-bar">
					<view class="search">
						<input @confirm="searchSubmit" confirmType="search" name="keyword" placeholder="搜索"></input>
					</view>
					<view class="flex flex-row tab-bar">
						<navigator class="flex-grow-1 flex-x-center" openType="redirect" url="/store/m/order/order?status=1">
							<view :class="[data.status==1?'active':'']">待付款</view>
						</navigator>
						<navigator class="flex-grow-1 flex-x-center" openType="redirect" url="/store/m/order/order?status=2">
							<view :class="[data.status==2?'active':'']">待发货</view>
						</navigator>
						<navigator class="flex-grow-1 flex-x-center" openType="redirect" url="/store/m/order/order?status=3">
							<view :class="[data.status==3?'active':'']">待收货</view>
						</navigator>
						<view class="menu flex-grow-1 flex-x-center">
							<view @click="showMenu" class="menu-text flex flex-x-center flex-row " :class="[data.status>3?'active':'']">
								<view class="flex-y-center">
									<block v-if="data.status<4">更多</block>
									<block v-if="data.status==4">已完成</block>
									<block v-if="data.status==5">售后</block>
									<block v-if="data.status==6">取消</block>
								</view>
								<view class="flex-y-center" style="font-size: 0">
									<view class="menu-icon">
										<view></view>
										<view></view>
										<view></view>
									</view>
								</view>
							</view>
							<view class="menu-list " :class="[data.show_menu?'show':'']">
								<navigator openType="redirect" url="/store/m/order/order?status=4">已完成</navigator>
								<navigator openType="redirect" url="/store/m/order/order?status=5">售后</navigator>
								<navigator openType="redirect" url="/store/m/order/order?status=6">取消</navigator>
							</view>
						</view>
					</view>
				</view>
				<view class="order-list">
					<view class="order-item" v-for="(oitem,oindex) in data.order_list" :key="oitem.id">
						<block v-if="!item.refund_order">
							<navigator :url="'/store/m/order-detail/order-detail?id='+oitem.id">
								<view class="flex flex-row" style="border-bottom: 1upx solid #eee;font-size: 9pt;padding-bottom: 24upx;color: #888;margin-bottom: 24upx">
									<view class="flex-grow-1">{{oitem.order_no}}</view>
									<view class="flex-grow-0">{{oitem.addtime}}</view>
								</view>
								<view class="flex flex-row" style="margin-bottom: 24upx" v-for="(ogitem,ogindex) in oitem.goods_list" :key="ogitem.id">
									<view class="flex-grow-0">
										<image :src="ogitem.cover_pic" style="width: 156upx;height: 156upx;margin-right: 24upx"></image>
									</view>
									<view class="flex-grow-1">
										<view class="goods-name">{{ogitem.name}}</view>
										<view style="font-size: 9pt;color: #888;">
											<view style="display: inline-block;margin-right: 24upx" v-for="(atitem,oaindex) in ogitem.attr" :key="atitem.id">
												{{atitem.attr_group_name}}:{{atitem.attr_name}}
											</view>
										</view>
										<view class="flex flex-row">
											<view class="flex-grow-1">×{{ogitem.num}}</view>
											<view class="flex-grow-0" style="color: #ff4544;text-align: right">
												{{ogitem.total_price}}
											</view>
										</view>
									</view>
								</view>
							</navigator>
							<view class="flex flex-row" style="border-top: 1upx solid #eee;padding-top: 24upx">
								<view class="flex-grow-1">合计：{{oitem.total_price}}</view>
								<view class="flex-grow-0">
									<button @click="showSendModal" class="order-item-btn" :data-index="index" v-if="oitem.is_pay==1&&oitem.is_send==0">发货</button>
								</view>
							</view>
						</block>
						<block v-else>
							<navigator :url="'/store/m/order-refund/order-refund?id='+oitem.id">
								<view class="flex flex-row" style="border-bottom: 1upx solid #eee;font-size: 18upx;padding-bottom: 24upx;color: #888;margin-bottom: 24upx">
									<view class="flex-grow-1">{{oitem.order_no}}</view>
									<view class="flex-grow-0">{{oitem.order_refund_time}}</view>
								</view>
								<view class="flex flex-row" style="margin-bottom: 24upx">
									<view class="flex-grow-0">
										<image :src="oitem.cover_pic" style="width: 156upx;height: 156upx;margin-right: 24upx"></image>
									</view>
									<view class="flex-grow-1">
										<view class="goods-name">{{oitem.name}}</view>
										<view style="font-size: 9pt;color: #888;">
											<view style="display: inline-block;margin-right: 24upx" v-for="(itatitem,itaindex) in oitem.attr" :key="itatitem.id">
												{{itatitem.attr_group_name}}:{{itatitem.attr_name}}
											</view>
										</view>
										<view class="flex flex-row">
											<view class="flex-grow-1">×{{oitem.num}}</view>
											<view class="flex-grow-0" style="color: #ff4544;text-align: right">
												{{oitem.total_price}}
											</view>
										</view>
									</view>
								</view>
								<view style="margin-bottom: 24upx">
									<image src="../../../static/store/icon-shouhou.png" style="width: 32upx;height: 32upx;display: inline-block;margin-top: 2upx; margin-right: 16upx;"></image>
									<text style="margin-right: 16upx;">{{oitem.refund_type}}</text>
									<text style="margin-right: 16upx;" v-if="oitemoitemoitem.status==0">待处理</text>
									<text style="margin-right: 16upx;" v-if="oitemoitem.status==1">退款完成</text>
									<text style="margin-right: 16upx;" v-if="oitem.status==2">换货完成</text>
									<text style="margin-right: 16upx;" v-if="oitem.status==3">已拒绝</text>
								</view>
							</navigator>
							<view class="flex flex-row" style="border-top: 1upx solid #eee;padding-top: 24upx">
								<view class="flex-grow-1">退款金额：￥{{oitem.refund_price}}</view>
								<view class="flex-grow-0">
									<block v-if="oitem.status==0">
										<button @click="refundDeny" class="order-item-btn" :data-index="index">拒绝</button>
										<button @click="refundPass" class="order-item-btn" :data-index="index">同意</button>
									</block>
									<block v-if="oitem.status==1">已同意退货退款</block>
									<block v-if="oitem.status==2">已同意换货</block>
									<block v-if="oitem.status==3">已拒绝</block>
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="flex-y-center flex-x-center" style="text-align: center;height: 174upx;color: #888;font-size: 9pt" v-if="data.no_orders">暂无订单
				</view>
				<view class="flex-y-center flex-x-center" style="text-align: center;height: 74upx;color: #888;font-size: 9pt" v-if="!data.no_orders&&data.no_more_orders">已无更多订单
				</view>
				<view class="loading-more " :class="[data.loading_more?'show':'']" v-if="!no_orders&&!no_more_orders">
					<image :src="data.__wxapp_img.system.loading_black.url" style="width: 50upx;height: 50upx"></image>
				</view>
			</view>
			<view class="order-modal flex flex-x-center flex-y-center " :class="data.show_send_modal?'show':''">
				<view class="modal-dialog" style="margin-top: -20vh">
					<view class="modal-body">
						<view style="padding-top: 40upx;text-align: center">选择发货方式</view>
						<view class="flex flex-row" style="padding: 48upx 24upx">
							<view class="flex-grow-1" style="text-align: center">
								<view @click="switchSendType" class="order-item-btn order-modal-btn " :class="[data.send_type=='express'?'active':'']"
								 data-type="express">快递配送
								</view>
							</view>
							<view class="flex-grow-1" style="text-align: center">
								<button @click="switchSendType" class="order-item-btn order-modal-btn " :class="[data.send_type=='none'?'active':'']"
								 data-type="none">无需物流
								</button>
							</view>
						</view>
					</view>
					<view class="modal-footer flex flex-row">
						<button @click="hideSendModal" class="flex-grow-1 modal-cancel">取消
							<view class="modal-split"></view>
						</button>
						<button @click="sendSubmit" class="flex-grow-1 modal-confirm">确认</button>
					</view>
				</view>
				<view class="modal-bg"></view>
			</view>
	<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
 data: {
        status: 1,
        show_menu: !1,
        order_list: [],
        no_orders: !1,
        no_more_orders: !1
    }
			}
		},
		 onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        e.setData({
            status: parseInt(t.status || 1),
            loading_more: !0
        }), e.loadOrderList(function() {
            e.setData({
                loading_more: !1
            });
        });
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
	methods:{
		 showMenu: function(t) {
		    this.setData({
		        show_menu: !this.data.show_menu
		    });
		},
		loadOrderList: function(t) {
		    var e = this, o = e.data.status, a = (e.data.current_page || 0) + 1, r = e.data.keyword || "";
		    e.getApp.request({
		        url: e.getApp.api.store.order.list,
		        data: {
		            status: o,
		            page: a,
		            keyword: r
		        },
		        success: function(t) {
		            0 == t.code && (1 != a || t.data.list && t.data.list.length || e.setData({
		                no_orders: !0
		            }), t.data.list && t.data.list.length ? (e.data.order_list = e.data.order_list || [], 
		            e.data.order_list = e.data.order_list.concat(t.data.list), e.setData({
		                order_list: e.data.order_list,
		                current_page: a
		            })) : e.setData({
		                no_more_orders: !0
		            }));
		        },
		        complete: function() {
		            "function" == typeof t && t();
		        }
		    });
		},
		showSendModal: function(t) {
		    this.setData({
		        show_send_modal: !0,
		        send_type: "express",
		        order_index: t.currentTarget.dataset.index
		    });
		},
		hideSendModal: function() {
		    this.setData({
		        show_send_modal: !1
		    });
		},
		switchSendType: function(t) {
		    var e = t.currentTarget.dataset.type;
		    this.setData({
		        send_type: e
		    });
		},
		sendSubmit: function() {
		    var e = this;
		    if ("express" == e.data.send_type) return e.hideSendModal(),  e.getApp.core.navigateTo({
		        url: "/store/m/order-send/order-send?id=" + e.data.order_list[e.data.order_index].id
		    });
		    e.getApp.core.showModal({
		        title: "提示",
		        content: "无需物流方式订单将直接标记成已发货，确认操作？",
		        success: function(t) {
		            t.confirm && (e.getApp.core.showLoading({
		                title: "正在提交",
		                mask: !0
		            }), e.getApp.request({
		                url: getApp().api.store.order.send,
		                method: "post",
		                data: {
		                    send_type: "none",
		                    order_id: e.data.order_list[e.data.order_index].id
		                },
		                success: function(e) {
		                    e.getApp.core.showModal({
		                        title: "提示",
		                        content: e.msg,
		                        success: function(t) {
		                            t.confirm && 0 == e.code && e.getApp.core.redirectTo({
		                                url: "/store/m/order/order?status=2"
		                            });
		                        }
		                    });
		                },
		                complete: function() {
		                    e.getApp.core.hideLoading({
		                        title: "正在提交",
		                        mask: !0
		                    });
		                }
		            }));
		        }
		    });
		},
		showPicList: function(t) {
		    myVue.getApp.core.previewImage({
		        urls: this.data.order_list[t.currentTarget.dataset.index].pic_list,
		        current: this.data.order_list[t.currentTarget.dataset.index].pic_list[t.currentTarget.dataset.pindex]
		    });
		},
		refundPass: function(t) {
		    var e = this, o = t.currentTarget.dataset.index, a = e.data.order_list[o].id, r = e.data.order_list[o].type;
		    e.getApp.core.showModal({
		        title: "提示",
		        content: "确认同意" + (1 == r ? "退款？资金将原路返回！" : "换货？"),
		        success: function(t) {
		            t.confirm && (e.getApp.core.showLoading({
		                title: "正在处理",
		                mask: !0
		            }), e.getApp.request({
		                url: e.getApp.api.store.order.refund,
		                method: "post",
		                data: {
		                    id: a,
		                    action: "pass"
		                },
		                success: function(t) {
		                    e.getApp.core.showModal({
		                        title: "提示",
		                        content: t.msg,
		                        showCancel: !1,
		                        success: function(t) {
		                            e.getApp.core.redirectTo({
		                                url: "/" + e.route + "?" + e.getApp.helper.objectToUrlParams(e.options)
		                            });
		                        }
		                    });
		                },
		                complete: function() {
		                    e.getApp.core.hideLoading();
		                }
		            }));
		        }
		    });
		},
		refundDeny: function(t) {
		    var e = this, o = t.currentTarget.dataset.index, a = e.data.order_list[o].id;
		    e.data.order_list[o].type;
		    e.getApp.core.showModal({
		        title: "提示",
		        content: "确认拒绝？",
		        success: function(t) {
		            t.confirm && (getApp().core.showLoading({
		                title: "正在处理",
		                mask: !0
		            }), e.getApp.request({
		                url: e.getApp.api.store.order.refund,
		                method: "post",
		                data: {
		                    id: a,
		                    action: "deny"
		                },
		                success: function(t) {
		                    e.getApp.core.showModal({
		                        title: "提示",
		                        content: t.msg,
		                        showCancel: !1,
		                        success: function(t) {
		                            e.getApp.core.redirectTo({
		                                url: "/" + e.route + "?" + e.getApp.helper.objectToUrlParams(e.options)
		                            });
		                        }
		                    });
		                },
		                complete: function() {
		                    e.getApp.core.hideLoading();
		                }
		            }));
		        }
		    });
		},
		searchSubmit: function(t) {
		    var e = this, o = t.detail.value;
		    e.setData({
		        keyword: o,
		        loading_more: !0,
		        order_list: [],
		        current_page: 0
		    }), e.loadOrderList(function() {
		        e.setData({
		            loading_more: !1
		        });
		    });
		}
	}
   
	}
</script>

<style scoped>
.order-item-btn {
    display: inline-block;
    font-size: 9pt;
    height: 60upx;
    line-height: 60upx;
    padding: 0 24upx;
    margin-left: 24upx;
    border: 1upx solid #ccc;
    color: #555;
    border-radius: 8upx;
    background: #fff;
    margin-bottom: -10upx;
}

.order-item-btn.button-hover {
    opacity: .75;
}

.order-item-btn:after {
    display: none;
}

.order-tab {
}

.order-tab .order-tab-item {
    text-align: center;
    height: 88upx;
    line-height: 88upx;
    border-bottom: 1upx solid #eee;
}

.order-tab .order-tab-item.active {
    background: #ff4544;
    color: #fff;
    border-bottom-color: #ff4544;
}

.after-navber {
    padding-top: 208upx;
}

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    z-index: 10;
}

.search {
    background: #EFEFF4;
    border-top: 1upx solid #e3e3e3;
    border-bottom: 1upx solid #e3e3e3;
    padding: 24upx 32upx;
    width: 100%;
}

.search input {
    background: #fff;
    border: 1upx solid #eee;
    border-radius: 999upx;
    text-align: center;
    height: 70upx;
    font-size: 9pt;
    width: 100%;
}

.top-bar .menu-text,.tab-bar navigator view {
    height: 90upx;
    line-height: 90upx;
    border-bottom: 4upx solid transparent;
}

.top-bar .menu-text.active,.tab-bar navigator view.active {
    border-color: #ff4544;
    color: #ff4544;
}

.top-bar .menu {
    position: relative;
}

.top-bar .menu-text {
    min-width: 133upx;
}

.top-bar .menu-icon {
    margin-left: 14upx;
}

.top-bar .menu-icon view {
    width: 18upx;
    height: 4upx;
    margin: 6upx 0;
    background: #888;
}

.top-bar .menu-text.active .menu-icon view {
    background: #ff4544;
}

.top-bar .menu-list {
    position: absolute;
    top: 100%;
    right: 24upx;
    left: 24upx;
    background: #fff;
    border: 1upx solid #e3e3e3;
    border-top: none;
    opacity: 0;
    visibility: hidden;
    transition: 150ms;
}

.top-bar .menu-list.show {
    opacity: 1;
    visibility: visible;
}

.top-bar .menu-list navigator {
    display: block;
    text-align: center;
    height: 90upx;
    line-height: 90upx;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loading-more {
    font-size: 0;
    text-align: center;
    padding: 12upx;
    opacity: .5;
    visibility: hidden;
    transition: 150ms;
}

.loading-more.show {
    visibility: visible;
    opacity: 1;
}

.order-list {
}

.order-item {
    background: #fff;
    margin-bottom: 24upx;
    border-top: 1upx solid #e3e3e3;
    border-bottom: 1upx solid #e3e3e3;
    padding: 24upx;
}

.order-item-btn {
    display: inline-block;
    font-size: 9pt;
    height: 60upx;
    line-height: 60upx;
    padding: 0 24upx;
    margin-left: 24upx;
    border: 1upx solid #ccc;
    color: #555;
    border-radius: 8upx;
    background: #fff;
    margin-bottom: -10upx;
}

.order-item-btn.button-hover {
    opacity: .75;
}

.order-item-btn:after {
    display: none;
}

.order-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    transform: translateY(100%);
    overflow-x: hidden;
    overflow-y: auto;
}

.order-modal .modal-bg {
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: 350ms;
}

.order-modal .modal-dialog {
    background: #fff;
    width: 75vw;
    border-radius: 16upx;
    box-shadow: 0 2upx 10upx rgba(0,0,0,.1);
    opacity: .25;
    transform: translateY(50%);
    transition: 250ms;
    overflow: hidden;
}

.order-modal .modal-header {
    text-align: center;
    padding: 40upx 0;
    font-weight: 400;
}

.order-modal .modal-body {
}

.order-modal .modal-footer {
    border-top: 1upx solid #eee;
}

.order-modal .modal-cancel,.order-modal .modal-confirm {
    background: #fff;
    font-weight: 11pt;
    font-family: inherit;
    height: 88upx;
    line-height: 88upx;
    padding: 0 0;
    text-align: center;
    border: none;
    border-radius: 0;
    color: #555;
    position: relative;
}

.order-modal .modal-confirm {
    color: #ff4544;
}

.order-modal .modal-cancel:after,.order-modal .modal-confirm:after {
    display: none;
}

.order-modal .modal-split {
    position: absolute;
    right: 0;
    top: 22upx;
    height: 44upx;
    width: 1upx;
    background: #e3e3e3;
}

.order-modal .modal-footer .button-hover {
    opacity: .75;
    background: #e3e3e3;
}

.order-modal.show {
    transform: translateY(0%);
}

.order-modal.show .modal-bg {
    opacity: 1;
}

.order-modal.show .modal-dialog {
    transform: translateY(0%);
    opacity: 1;
}

.order-modal-btn {
    height: 80upx;
    line-height: 80upx;
    padding: 0 32upx;
    border: 1upx solid #e2e2e2;
    border-radius: 16upx;
    font-size: 11pt;
    margin: 0 0;
}

.order-modal-btn.active {
    background: #ff4544;
    color: #fff;
    border-color: #ff4544;
}

.goods-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
</style>
